<template>
  <div class="color-tag" :style="{ color: fontColor, borderColor: borderColor, backgroundColor: bgColor }">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { getLightColor } from "@/utils/color";
import { computed } from "vue";

type Props = {
  color?: string;
};

const defaultColor = "#009688";

const props = withDefaults(defineProps<Props>(), {
  color: defaultColor
});

const fontColor = computed(() => {
  if (props.color) {
    return props.color;
  }
  return defaultColor;
});

const bgColor = computed(() => {
  if (props.color) {
    return getLightColor(props.color, 0.9) + "";
  } else {
    return getLightColor(defaultColor, 0.9) + "";
  }
});

const borderColor = computed(() => {
  if (props.color) {
    return getLightColor(props.color, 0.8) + "";
  } else {
    return getLightColor(defaultColor, 0.8) + "";
  }
});
</script>

<style scoped lang="scss">
.color-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}
</style>
